<template>
  <div class="backgroup-body"
       :style="{height: height}">
    <canvas class="canvas"></canvas>
    <div class="slot-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import snow from '@/utils/snow'

export default {
  data () {
    return {
      clientHeight: undefined,
    }
  },
  computed: {
    height () {
      if (typeof (this.clientHeight) === undefined) {
        return '100vh';
      }
      return `${this.clientHeight}px`;
    }
  },
  mounted () {
    const draw = new snow(document.querySelector('canvas'))
    this.clientHeight = window.innerHeight
    draw.run()
  }
}
</script>

<style lang="scss" scoped>
.backgroup-body {
  position: relative;
  min-height: 100vh;
  background-color: #34345b;
  background-image: radial-gradient(
      #ffffff,
      rgba(77, 78, 127, 0.2) 2px,
      transparent 40px
    ),
    radial-gradient(#ffffff, rgba(77, 78, 127, 0.15) 1px, transparent 30px),
    radial-gradient(#ffffff, rgba(77, 78, 127, 0.1) 2px, transparent 40px),
    radial-gradient(
      rgba(77, 78, 127, 0.4),
      rgba(77, 78, 127, 0.1) 2px,
      transparent 30px
    );
  background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
  overflow: hidden;
  .canvas {
    z-index: 1;
  }
  .slot-body {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
}
</style>